import { h } from 'preact';
import { Image, Banner } from '../../components';
import Article from '../common/Article';
import AsideContent from './AsideContent';

const sliderPics = [
	{ title: '个人博客从简不繁', href: '', img: './assets/images/7d49754e217a5ad6b80e88acde94bc57.jpg', sTitle: '慢生活' },
	{ title: '我们可以从CSS框架中借鉴到什么', href: '', img: './assets/images/bc2570db45bb0e607cbb3f3bffdec246.png', sTitle: '学习笔记' }
];

const newItems = [
	{ title: '我是怎么评价自己的？', img: './assets/images/95d1b1577a8a7aa4fe3893f2502617e9.jpg', href: '' },
	{ title: '年底了，要总结总结', img: './assets/images/7b23e40fd0e148e991c6a04b8e9612ab.jpg', href: '' },
	{ title: '我不入坑谁入坑', img: './assets/images/cb83fc3e74125e79a3c508eecbe99cda.jpg', href: '' },
	{ title: '作为一个设计师,如果遭到质疑你是否能恪守自己的原则?', img: './assets/images/75842f4d1e18d692a66c38eb172a40ab.jpg', href: '' }
];

const pics = [
	{ title: '云南之行——丽江古镇玉龙雪山', img: './assets/images/cb83fc3e74125e79a3c508eecbe99cda.jpg', href: '' },
	{ title: '云南之行——大理洱海一日游', img: './assets/images/8f91a94816062276afe62062ef271239.jpg', href: '' },
	{ title: '云南之行——初到昆明滇池半日游', img: './assets/images/9129a0317b9e3dda6b8e5e4af8f21b60.jpg', href: '' }
];

const SliderPic = ({ title, href, img, sTitle }) => (
	<li>
		<a href={href} title={title} >
			<i><Image src={img} /></i>
			<h2>{title}</h2>
			<span>{sTitle}</span>
		</a>
	</li>
);

const PicItem = ({ img, href, title }) => (
	<li>
		<i><a title={title}><Image src={img} /></a></i>
		<h3><a href={href} title={title}>{title}</a></h3>
	</li>
);

const Pic = ({ img, href, title }) => (
	<li>
		<i>
			<a href={href} title={title} >
				<Image src={img} />
			</a>
		</i>
		<span>{title}</span>
	</li>
);


const bannerItems = [
	{ id: 1, img: './assets/images/banner01.jpg', desc: '安安静静搬砖，快快乐乐学习', href: '#' },
	{ id: 2, img: './assets/images/762f99f369ae786f970477feeb3b9d77.jpg', desc: '个人博客，属于我的小世界！', href: '#' },
	{ id: 3, img: './assets/images/timg.jpeg', desc: '世界那么大，我想去海边走走', href: '#' }
];

const articles = [
	{
		id:1,
		title: '【匆匆那些年】总结个人博客经历的这四年…',
		href: '#',
		img: './assets/images/a465dddcbbcce5f7d73e1ea7fdc48b11.jpg',
		simpleText: '博客从最初的域名购买，到上线已经有四年的时间了，这四年的时间，有笑过，有怨过，有悔过，有执着过，也有放弃过…但最后还是坚持了下来，时间如此匆匆，等再回过头已来不及去弥补...',
		author: '温南南',
		createTime: '2018-02-26',
		readCount: 19,
		type:1,
		status: '1'
	},
	{
		id:2,
		title: '或许换一个活法,能让你走出阴霾',
		href: '#',
		img: './assets/images/love.jpg',
		simpleText: '前段时间回成都,去见了几年未见的老友.一起吃了饭,还带我家宝宝去玩.我问她为什么这么久都还没有打算要孩子,她说,她有一段时间患上了忧郁症,很长的时间才走出来,我听她这么说,我都很惊讶!想问问她原因,可见她欲言又止的神情,我便不再主动问她.就听着她慢慢的说.其实主要的原因还是源自于工作和家庭,工作压力大,每天的程序代码,上级不停的催,她甚至连续好几个通宵的熬夜,,,...',
		author: '温南南',
		createTime: '2018-02-26',
		type:2,
		readCount: 19,
		status: '1'
	},
	{
		id:3,
		title: '心路历程】请不要在设计这条路上徘徊啦',
		href: '#',
		img: '',
		simpleText: '我整理了一下网友给我的来信，如果你还在踌躇不前，不妨来看看，到底要不要坚持下去！我也欢迎大家给我来信，希望能帮到更多人。...',
		author: '温南南',
		createTime: '2018-02-26',
		readCount: 19,
		status: '1',
		type:3,
		children: [
			{ title: '心路历程】请不要在设计这条路上徘徊啦',href: '#',img: './assets/images/bike.jpg',simpleText: '' },
			{ title: '心路历程】请不要在设计这条路上徘徊啦',href: '#',img: './assets/images/bike.jpg',simpleText: '' },
			{ title: '心路历程】请不要在设计这条路上徘徊啦',href: '#',img: './assets/images/bike.jpg',simpleText: '' }
		]
	}
];

const Home = () => (
	<article 
		// style="position: relative;"
		// className={'container'}
	>
		{/* <!--banner begin--> */}
		<Banner>
			{bannerItems.map(i => (
				<Banner.Item title={i.desc} >
					<img src={i.img} />
					<span className="imginfo">{i.desc}</span>
				</Banner.Item>
			))}
		</Banner>
		{/* <!--banner end--> */}
		<ul className="toppic">
			{sliderPics.map(i => <SliderPic {...i} />)}
		</ul>
		{/* 主体内容 start */}
		<main>
			<div className="news_box">
				<ul>
					{newItems.map(i => <PicItem {...i} />)}
				</ul>
			</div>
			{/* <!-- 图片列表 --> */}
			<div className="pics">
				<ul>
					{pics.map(i => <Pic {...i} />)}
				</ul>
			</div>
			{/* 推荐的文章 */}
			<div className="blogtab">
				<ul id="blogtab">
					<li className="current">站长推荐</li>
					{/* <li className="current">热点</li>  */}
				</ul>

				{articles.map(i=>{
					return <Article data={i} type={1} />;
				})}
			</div>
		</main>
		{/* 主体内容 end */}

		{/* 侧边内容 start */}
		<AsideContent />
		{/* 侧边内容 end */}

	</article>
);

export default Home;
